凡例の構成

グラフの凡例には、グラフに表示されているデータセットに関するデータが表示されます。

構成オプション

凡例の設定は、options.legend名前空間。グラフの凡例のグローバル オプションは次のように定義されています。Chart.defaults.global.legend。

位置

レジェンドの位置。オプションは次のとおりです。

• 'top'
• 'left'
• 'bottom'
• 'right'

整列

凡例の配置。オプションは次のとおりです。

• 'start'
• 'center'
• 'end'

デフォルトは'center'認識されない値の場合。

凡例ラベルの構成

凡例ラベル構成は、labels鍵。

凡例項目インターフェイス

レジェンドに引き継がれるアイテムonClick関数はから返されるものですlabels.generateLabels。これらの項目は次のインターフェイスを実装する必要があります。

{
    // Label that will be displayed
    text: string,

    // Fill style of the legend box
    fillStyle: Color,

    // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
    hidden: boolean,

    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: string,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: number[],

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: number,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: string,

    // Width of box border
    lineWidth: number,

    // Stroke style of the legend box
    strokeStyle: Color,

    // Point style of the legend box (only used if usePointStyle is true)
    pointStyle: string | Image,

    // Rotation of the point in degrees (only used if usePointStyle is true)
    rotation: number
}

例

次の例では、凡例を有効にしてグラフを作成し、すべてのテキストを赤色にします。

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

カスタムのクリック時アクション

凡例内の項目をクリックしたときに、異なる動作をトリガーしたい場合がよくあります。これは、config オブジェクトのコールバックを使用して簡単に実現できます。

デフォルトの凡例クリック ハンドラーは次のとおりです。

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // See controller.isDatasetVisible comment
    meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

    // We hid a dataset ... rerender the chart
    ci.update();
}

代わりに、最初の 2 つのデータセットの表示をリンクしたいとします。それに応じてクリック ハンドラーを変更できます。

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // Do the original logic
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [
            ci.getDatasetMeta(0),
            ci.getDatasetMeta(1)
        ].forEach(function(meta) {
            meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            onClick: newLegendClickHandler
        }
    }
});

このグラフの凡例をクリックすると、最初の 2 つのデータセットの表示設定がリンクされます。

HTML 凡例

場合によっては、非常に複雑な凡例が必要になることがあります。このような場合、HTML 凡例を生成するのが合理的です。チャートは、generateLegend()凡例の HTML 文字列を返すプロトタイプのメソッド。

この凡例の生成方法を構成するには、legendCallback設定プロパティ。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function(chart) {
            // Return the HTML string here.
        }
    }
});

legendCallback は自動的に呼び出されないため、呼び出す必要があることに注意してください。generateLegend()このメソッドを使用して凡例を作成するときは、コード内で自分自身を作成する必要があります。